import { RouteLocationNormalized, RouteParams } from 'vue-router'
import { createStore } from 'vuex'

export interface OpenTabProps {
  title: string;
  key: string;
  routeName: string;
  routeParams?: RouteParams;
}

export interface LoginUserInfoProps {
  id: number;
  username: string;
  permissionNameList: string[];
}

export interface GolbalStateDataProps {
  sideBarCollapsed: boolean;
  menuSelectedKeys: string[];
  menuOpenKeys: string[];
  openTabs: OpenTabProps[];
  activeTab: string;
  authorizationData: string;
  loginRedirectionRoute?: RouteLocationNormalized;
  loginUserInfo: LoginUserInfoProps;
}

export default createStore<GolbalStateDataProps>({
  state: {
    sideBarCollapsed: false, // 侧栏伸缩
    menuSelectedKeys: [], // 当前选中的菜单
    menuOpenKeys: [], // 当前开始的菜单组
    openTabs: [], // 打开的 tab 数组
    activeTab: '', // 激活的 tab
    authorizationData: '', // jwt 头信息 不含 Bearer 前缀
    loginRedirectionRoute: undefined, // 登陆后跳转路由
    loginUserInfo: {
      id: 0,
      username: '',
      permissionNameList: [],
    }, // 权限名称列表
  },
  mutations: {
    // 设置侧栏伸缩
    changeSideBarCollapsed(state) {
      state.sideBarCollapsed = !state.sideBarCollapsed
    },
    // 设置侧栏伸缩
    setSideBarCollapsed(state, collapsed) {
      state.sideBarCollapsed = collapsed
    },
    // 修改 打开菜单
    changeOpenMenu(state, menuInfo) {
      state.menuSelectedKeys = [menuInfo.menu]
      state.menuOpenKeys = [menuInfo.group]
    },
    // 增加 tab
    addTab(state, tabInfo: OpenTabProps) {
      state.activeTab = tabInfo.key

      state.openTabs.push(tabInfo)
    },
    // 移除 tab
    removeTab(state, targetKey) {
      let lastIndex = 0;
      // 获取删除 tab 的前一个索引
      state.openTabs.forEach((tab, i) => {
        if (tab.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      // 移除掉删除的 tab
      state.openTabs = state.openTabs.filter(tab => tab.key !== targetKey);
      // 如果当前选择的tab 被删除了，就高亮当前选择tab 的前一个或者第一个tab
      if (state.openTabs.length && state.activeTab === targetKey) {
        if (lastIndex >= 0) {
          state.activeTab = state.openTabs[lastIndex].key;
        } else {
          state.activeTab = state.openTabs[0].key;
        }
      }
    },
    // 修改激活 tab
    changeActiveTab(state, tabKey) {
      console.log("tabKey", tabKey)
      state.activeTab = tabKey
    },
    // 设置登录后跳转路由
    setLoginRedirectionRoute(state, to) {
      state.loginRedirectionRoute = to
    },
    // 设置 jwt token
    setAuthorizationData(state, authorizationData) {
      state.authorizationData = authorizationData
    },
    setLoginUserInfo(state, userInfo) {
      state.loginUserInfo = userInfo
    }
  },
  actions: {
    // 设置 jwt token
    setAuthorizationData(state, authorizationData) {
      state.commit('setAuthorizationData', authorizationData)
      localStorage.setItem('authorizationData', authorizationData)
    },
    setLoginUserInfo(state, responseUserInfo) {
      const loginUserInfo: LoginUserInfoProps ={
        id: 0,
        username: '',
        permissionNameList: [],
      }
      loginUserInfo.id = responseUserInfo.ID
      loginUserInfo.username = responseUserInfo.Username
      responseUserInfo.Permissions.forEach((permission: { Name: string }) => {
        loginUserInfo.permissionNameList.push(permission.Name)
      });
      console.log("store action setLoginUserInfo loginUserInfo", loginUserInfo)
      state.commit('setLoginUserInfo', loginUserInfo)
    }
  },
  modules: {
  }
})
